<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>实例配置</title>
    <link rel="stylesheet" href="/businessProcessManager/js/ele/index.css">
    <link rel="stylesheet" href="/businessProcessManager/css/style.css">
</head>
<body>
<header>
    <img src="/businessProcessManager/images/logo.png" alt="">
    <span class="com-name">业务流程管理平台</span>
</header>
<div>
    <div class="side" id="side">
        <div id="menu" class="menu">
            <el-menu default-active="2" unique-opened class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">
                <el-submenu index="1">
                    <template slot="title"><i class="el-icon-menu"></i>业务流程管理</template>
                    <a href="process.html"><el-menu-item index="1-1">流程管理</el-menu-item></a>
                    <a href="process-list.html"><el-menu-item index="1-1">流程定义</el-menu-item></a>
                    <a href="sortManager.html"><el-menu-item index="1-2">分类管理</el-menu-item></a>
                    <a href="monitor.html"><el-menu-item index="1-3">运行监控</el-menu-item></a>
                    <a href="task-entrust.html"><el-menu-item index="1-4">任务委托</el-menu-item></a>
                   <!-- <a href="user-group.html"><el-menu-item index="1-5">用户分组</el-menu-item></a>
                    <a href="dataAllocation.html"><el-menu-item index="1-6">数据配置</el-menu-item></a>
                    <a href="exampleAllocation.html"><el-menu-item index="1-7">实例配置</el-menu-item></a>-->
                </el-submenu>
            </el-menu>

        </div>
    </div>
    <div class="main-wrapper " >
        <div class="nav-bar">
            <span class="position-info">您现在的位置：<a>实例配置</a> &gt; <span class="current-position">实例配置</span></span>
        </div>
        <div class="content-wrapper" style="top: 45px;">
            <div id="tab" class="run-detail relative">
                <el-tabs v-model="activeName">
                    <el-tab-pane label="按流程" name="first">
                        <div  class="tree-wrapper">
                            <el-tree
                                    :data="treeDatas"
                                    node-key="id"
                                    ref="tree"
                                    highlight-current
                                    lazy
                                    :expand-on-click-node="false"
                                    :load="loadNode"
                                    @node-click="getKey"
                                    :props="defaultProps">
                            </el-tree>
                        </div>
                        <div class="table-box" style="margin-left: 200px">
                            <div class="form-box">
                                <el-form :inline="true" :model="detailForm" class="demo-form-inline">
                                    <el-form-item label="开始时间：" :label-width="formLabelWidth">
                                        <el-date-picker
                                                v-model="detailForm.startTime"
                                                type="date"
                                                placeholder="选择日期"
                                        >
                                        </el-date-picker>
                                    </el-form-item>
                                    <el-form-item label="结束时间：" :label-width="formLabelWidth">
                                        <el-date-picker
                                                v-model="detailForm.endTime"
                                                type="date"
                                                placeholder="选择日期"
                                        >
                                        </el-date-picker>
                                    </el-form-item>
                                    <el-form-item label=" " :label-width="formLabel2Width">
                                        <el-button type="primary" @click="query">查询</el-button>
                                    </el-form-item>

                                </el-form>
                            </div>
                            <div class="center">
                                <el-table
                                        :data="detailList"
                                        border
                                        @selection-change="">
                                    <el-table-column
                                            type="index"
                                            width="80"
                                            label="序号">
                                    </el-table-column>
                                    <el-table-column
                                            prop="task"
                                            label="流程名称"
                                    >
                                    </el-table-column>
                                    <el-table-column
                                            prop="task"
                                            label="任务"
                                    >
                                    </el-table-column>
                                    <el-table-column
                                            prop="startTime"
                                            label="启动时间">
                                    </el-table-column>

                                    <el-table-column
                                            prop="endTime"
                                            label="完成时间"
                                    >
                                    </el-table-column>
                                    <el-table-column
                                            prop="transactTimes"
                                            label="当前环节"
                                    >
                                    </el-table-column>
                                    <el-table-column
                                            prop="transacter"
                                            label="办理人"
                                    >
                                    </el-table-column>

                                    <el-table-column
                                            prop="status"
                                            label="状态"
                                    >
                                    </el-table-column>


                                </el-table>
                            </div>
                            <div class="page-box mt20 text-right">
                                <el-pagination
                                        layout="prev, pager, next"
                                        :total="50">
                                </el-pagination>
                            </div>
                            <div class="tab-child-box">
                                <el-tabs v-model="firstActive">
                                    <el-tab-pane label="KPI指标" name="first1">
                                        <div class="tab-warp">

                                        </div>
                                    </el-tab-pane>
                                    <el-tab-pane label="配置项1" name="first2">
                                        <div class="tab-warp">

                                        </div>
                                    </el-tab-pane>
                                    <el-tab-pane label="配置项2" name="first3">
                                        <div class="tab-warp">

                                        </div>
                                    </el-tab-pane>
                                </el-tabs>
                            </div>
                        </div>

                    </el-tab-pane>
                    <el-tab-pane label="按部门" name="second">
                        <div  class="tree-wrapper">
                            <el-tree
                                    :data="data2"
                                    node-key="id"
                                    ref="tree"
                                    highlight-current
                                    :expand-on-click-node="false"
                                    @node-click="getKey"
                                    :props="defaultProps">
                            </el-tree>
                        </div>
                        <div class="table-box" style="margin-left: 200px">
                            <div class="form-box">
                                <el-form :inline="true" :model="detailForm2" class="demo-form-inline">
                                    <el-form-item label="开始时间：" :label-width="formLabelWidth">
                                        <el-date-picker
                                                v-model="detailForm2.startTime"
                                                type="date"
                                                placeholder="选择日期"
                                        >
                                        </el-date-picker>
                                    </el-form-item>
                                    <el-form-item label="结束时间：" :label-width="formLabelWidth">
                                        <el-date-picker
                                                v-model="detailForm2.endTime"
                                                type="date"
                                                placeholder="选择日期">
                                        </el-date-picker>
                                    </el-form-item>
                                    <el-form-item label=" " :label-width="formLabel2Width">
                                        <el-button type="primary" @click="query">查询</el-button>
                                    </el-form-item>

                                </el-form>
                            </div>
                            <div class="center">
                                <el-table
                                        :data="detailList"
                                        border
                                        @selection-change="">
                                    <el-table-column
                                            type="index"
                                            width="80"
                                            label="序号">
                                    </el-table-column>
                                    <el-table-column
                                            prop="task"
                                            label="流程名称"
                                    >
                                    </el-table-column>
                                    <el-table-column
                                            prop="task"
                                            label="任务"
                                    >
                                    </el-table-column>
                                    <el-table-column
                                            prop="startTime"
                                            label="启动时间">
                                    </el-table-column>

                                    <el-table-column
                                            prop="endTime"
                                            label="完成时间"
                                    >
                                    </el-table-column>
                                    <el-table-column
                                            prop="transactTimes"
                                            label="当前环节"
                                    >
                                    </el-table-column>
                                    <el-table-column
                                            prop="transacter"
                                            label="办理人"
                                    >
                                    </el-table-column>

                                    <el-table-column
                                            prop="status"
                                            label="状态"
                                    >
                                    </el-table-column>


                                </el-table>
                            </div>
                            <div class="page-box mt20 text-right">
                                <el-pagination
                                        layout="prev, pager, next"
                                        :total="50">
                                </el-pagination>
                            </div>
                            <div class="tab-child-box">
                                <el-tabs v-model="secondActive">
                                    <el-tab-pane label="KPI指标" name="second1">
                                        <div class="tab-warp">

                                        </div>
                                    </el-tab-pane>
                                    <el-tab-pane label="配置项1" name="second2">
                                        <div class="tab-warp">

                                        </div>
                                    </el-tab-pane>
                                    <el-tab-pane label="配置项2" name="second3">
                                        <div class="tab-warp">

                                        </div>
                                    </el-tab-pane>
                                </el-tabs>
                            </div>
                        </div>

                    </el-tab-pane>
                    <el-tab-pane label="按办理人" name="third">
                        <div class="tree-wrapper">
                            <el-tree
                                    :data="data2"
                                    node-key="id"
                                    ref="tree"
                                    highlight-current
                                    :expand-on-click-node="false"
                                    @node-click="getKey"
                                    :props="defaultProps">
                            </el-tree>
                        </div>
                        <div class="table-box" style="margin-left: 200px">
                            <div class="form-box">
                                <el-form :inline="true" :model="detailForm3" class="demo-form-inline">
                                    <el-form-item label="开始时间：" :label-width="formLabelWidth">
                                        <el-date-picker
                                                v-model="detailForm3.startTime"
                                                type="date"
                                                placeholder="选择日期"
                                        >
                                        </el-date-picker>
                                    </el-form-item>
                                    <el-form-item label="结束时间：" :label-width="formLabelWidth">
                                        <el-date-picker
                                                v-model="detailForm3.endTime"
                                                type="date"
                                                placeholder="选择日期"
                                        >
                                        </el-date-picker>
                                    </el-form-item>
                                    <el-form-item label=" " :label-width="formLabel2Width">
                                        <el-button type="primary" @click="query">查询</el-button>
                                    </el-form-item>

                                </el-form>
                            </div>
                            <div class="center">
                                <el-table
                                        :data="detailList"
                                        border
                                        @selection-change="">
                                    <el-table-column
                                            type="index"
                                            width="80"
                                            label="序号">
                                    </el-table-column>
                                    <el-table-column
                                            prop="task"
                                            label="流程名称"
                                    >
                                    </el-table-column>
                                    <el-table-column
                                            prop="task"
                                            label="任务"
                                    >
                                    </el-table-column>
                                    <el-table-column
                                            prop="startTime"
                                            label="启动时间">
                                    </el-table-column>

                                    <el-table-column
                                            prop="endTime"
                                            label="完成时间"
                                    >
                                    </el-table-column>
                                    <el-table-column
                                            prop="transactTimes"
                                            label="当前环节"
                                    >
                                    </el-table-column>
                                    <el-table-column
                                            prop="transacter"
                                            label="办理人"
                                    >
                                    </el-table-column>

                                    <el-table-column
                                            prop="status"
                                            label="状态"
                                    >
                                    </el-table-column>


                                </el-table>
                            </div>
                            <div class="page-box mt20 text-right">
                                <el-pagination
                                        layout="prev, pager, next"
                                        :total="50">
                                </el-pagination>
                            </div>
                            <div class="tab-child-box">
                                <el-tabs v-model="thirdActive">
                                    <el-tab-pane label="KPI指标" name="third1">
                                        <div class="tab-warp">

                                        </div>
                                    </el-tab-pane>
                                    <el-tab-pane label="配置项1" name="third2">
                                        <div class="tab-warp">

                                        </div>
                                    </el-tab-pane>
                                    <el-tab-pane label="配置项2" name="third3">
                                        <div class="tab-warp">

                                        </div>
                                    </el-tab-pane>
                                </el-tabs>
                            </div>
                        </div>

                    </el-tab-pane>

                </el-tabs>
            </div>
        </div>
        <div class="foot-biu">
            四川新迎顺信息技术股份有限公司
        </div>
    </div>
</div>

<!-- 先引入 Vue -->
<script src="/businessProcessManager/js/ele/vue.js"></script>
<script src="/businessProcessManager/js/ele/vue-resource.js"></script>
<script src="/businessProcessManager/js/ele/vue-router.js"></script>
<!-- 引入组件库 -->
<script src="/businessProcessManager/js/ele/index.js"></script>
<script src="/businessProcessManager/js/jquery.min.js"></script>
<script src="/businessProcessManager/js/jquery.mCustomScrollbar.concat.min.js"></script>
<!--引入url配置文件-->
<script src="/businessProcessManager/js/config.js"></script>
<script>
    //
    var menu = new Vue({
        el:'#menu',
        methods: {
            handleOpen:function(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose:function(key, keyPath) {
                console.log(key, keyPath);
            }
        }
    });

    var tab = new Vue({
        el:'#tab',
        data:{
            activeName: 'first',
            formLabelWidth:'85px',
            formLabel2Width:'30px',
            firstActive:'first1',
            secondActive:'second1',
            thirdActive:'third1',
            detailForm:{
                startTime:'',
                endTime:''
            },
            detailForm2:{
                startTime:'',
                endTime:''
            },
            detailForm3:{
                startTime:'',
                endTime:''
            },
            defaultProps: {
                children: 'children',
                label: 'NAME'
            },
            detailList:[
                {
                    task:'任务111',
                    startTime:'2017-06-03 16:08:22',
                    endTime:'2017-06-05 16:08:32',
                    transacter:'张三',
                    transactTimes:'2天10分钟',
                    status:'已完成'
                },{
                    task:'任务111',
                    startTime:'2017-06-03 16:08:22',
                    endTime:'2017-06-05 16:08:32',
                    transacter:'张三',
                    transactTimes:'2天10分钟',
                    status:'已完成'
                },{
                    task:'任务111',
                    startTime:'2017-06-03 16:08:22',
                    endTime:'2017-06-05 16:08:32',
                    transacter:'张三',
                    transactTimes:'2天10分钟',
                    status:'已完成'
                },{
                    task:'任务111',
                    startTime:'2017-06-03 16:08:22',
                    endTime:'2017-06-05 16:08:32',
                    transacter:'张三',
                    transactTimes:'2天10分钟',
                    status:'已完成'
                },{
                    task:'任务111',
                    startTime:'2017-06-03 16:08:22',
                    endTime:'2017-06-05 16:08:32',
                    transacter:'张三',
                    transactTimes:'2天10分钟',
                    status:'已完成'
                },{
                    task:'任务111',
                    startTime:'2017-06-03 16:08:22',
                    endTime:'2017-06-05 16:08:32',
                    transacter:'张三',
                    transactTimes:'2天10分钟',
                    status:'已完成'
                },{
                    task:'任务111',
                    startTime:'2017-06-03 16:08:22',
                    endTime:'2017-06-05 16:08:32',
                    transacter:'张三',
                    transactTimes:'2天10分钟',
                    status:'已完成'
                },{
                    task:'任务111',
                    startTime:'2017-06-03 16:08:22',
                    endTime:'2017-06-05 16:08:32',
                    transacter:'张三',
                    transactTimes:'2天10分钟',
                    status:'已完成'
                },{
                    task:'任务111',
                    startTime:'2017-06-03 16:08:22',
                    endTime:'2017-06-05 16:08:32',
                    transacter:'张三',
                    transactTimes:'2天10分钟',
                    status:'已完成'
                }
            ]

        },
        methods:{
            handleClick:function(tab, event) {
                console.log(tab, event);
            },
            save1:function () {
                this.$message({
                    showClose: true,
                    type: 'warning',
                    duration:1000000,
                    message: '您有4个文件需要进行会签！'
                });
            },
            query:function () {//查询

            },
            getKey:function (data,node) {
                this.$http.get(url+portC+"actProcess/"+data.ID).then(function(data){

                },function(response){
                    console.info(response);
                    if(response){

                    }
                })
                console.log(data);
            },
            loadNode:function(node,addNode){
                var pid;
                if(node.id==0){
                    pid = "-1";
                }else{
                    pid = node.data.ID;
                }
                this.$http.get(url+portC+"actProcess",{'pid':pid}).then(function(data){
                    addNode(data.data);
                },function(response){
                    console.info(response);
                    if(response){

                    }
                })
            },
        }
    })

</script>
</body>
</html>
